<template>
	<view class="connection">
		<view class="title">
			<view class="title_item left title_left">类型/SN</view>
			<view class="title_item center">状态</view>
			<view class="title_item right">数据更新时间</view>
		</view>
		<uni-card margin="0">
			<uni-collapse>
				<uni-collapse-item titleBorder="none" :show-animation="true">
					<template v-slot:title>
						<view class="collapse_title">
							<view class="collapse_title_item left">
								<view style="font-size: 32rpx;">{{connectionInfo.deviceTitle||'--'}}</view>
								<view >{{connectionInfo.deviceSn||'--'}}</view>
							</view>
							<view class="collapse_title_item center">{{connectionInfo.workStatus?workStatus[connectionInfo.workStatus]:'--'}}</view>
							<view class="collapse_title_item right">{{connectionInfo.createTime||'--'}}</view>
						</view>
					</template>
					<view class="content">
						<view class="title ">
							<view class="title_item left">类型/SN</view>
							<view class="title_item center">状态</view>
							<view class="title_item right">数据更新时间</view>
						</view>
						<view class="collapse_title" v-for="item in deviceEntities" :key="item.id">
							<view class="collapse_title_item left">
								<view style="font-size: 32rpx;">{{item.deviceTitle||'--'}}</view>
								<view >{{item.deviceSn||'--'}}</view>
							</view>
							<view class="collapse_title_item center">{{item.workStatus?workStatus[item.workStatus]:'--'}}</view>
							<view class="collapse_title_item right">{{item.createTime||'--'}}</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</uni-card>
	</view>
</template>

<script>
	import {
		getDeviceQueryConnection
	} from "@/common/api/api.js"
		import  {workStatus} from '@/common/const/workStatus.js'
	export default {
		props: {
			did: {
				type: String,
				default: '',
			}
		},
		data(){
			return{
				connectionInfo:{
					deviceTitle:"",
					deviceSn:"",
					workStatus:null
				},
				deviceEntities:null
			}
		},
		mounted(){
			this.$nextTick(()=>{
				this.getData()
			})
			this.workStatus  = workStatus
		},
		methods:{
			async getData(){
				let res =await getDeviceQueryConnection({id:this.did})
				this.connectionInfo = res.data
				this.deviceEntities = res.data.deviceEntities
			}
		}
		
	}
</script>

<style scoped lang='scss'>
	.connection{
		.title{
			font-size: 28rpx;
			font-weight: bold;
			padding: 20rpx 0;
			display: flex;
			.title_item{
				padding-left: 10rpx;
			}
			.title_left{
				text-indent: 40rpx;
			}
			.left{
				width: 30%;
			}
			.center{
				width: 25%;
			}
		}
		.collapse_title{
			display: flex;
			font-size: 24rpx;
			.collapse_title_item{
				height: 100rpx;
				view{
					height: 50rpx;
					line-height: 50rpx;
				}
			}
			.left{
				width: 30%;
			}
			.center{
				text-indent: 40rpx;
				width: 25%;
			}
			.right{
				line-height: 100rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.content{
			.title{
				border-top: 2rpx solid #ccc;
			}
		}
	}

</style>